<template>
  <div style="height: 5px"></div>
  <div class="long-list-container" @click="toComicDetail">
    <div class="long-list-box">
      <div class="img-container">
        <img :src="message.thumb.fileServer + '/static/' + message.thumb.path" style="width: 100px; height: 120px">
      </div>
      <div style="width: 10px;"></div>
      <div class="text-container">
        <div class="title">{{ message.title }}</div>
        <div class="author">{{ message.author }}</div>
        <div class="label-container" style="color: white">
          <label-plus v-for="item in message.categories" :text="item" :key="item.value"></label-plus>
        </div>
        <div style="height: 27%; width: 100%; display: flex;">
          <like-and-read path="like.png" :text="message.likesCount"></like-and-read>
          <like-and-read path="readed.png" :text="message.pagesCount"></like-and-read>
        </div>
      </div>
      <div class="tag-container">
        <div class="tag" v-show="isShowShengrou" :style="{'background-color':'#f1929d', 'height':height}">生肉</div>
        <div class="tag" v-show="isShowDanmei" :style="{'background-color':'#34c6d9', 'height':height}">耽美</div>
        <div class="tag" v-show="isShowZhogkou" :style="{'background-color':'#d97334', 'height':height}">重口</div>
      </div>
    </div>

  </div>
  <div style="height: 5px"></div>
</template>

<script>
import likeAndRead from "@/components/main/part/likeAndRead";
import labelPlus from "@/components/main/part/label";
import router from "@/router";
import {onMounted, ref} from "vue";
export default {
  name: "longList",
  props:["message"],
  components:{
    labelPlus,
    likeAndRead
  },
  setup(props) {
    let height = ref("0")

    let isShowZhogkou = ref(false)
    let isShowDanmei = ref(false)
    let isShowShengrou = ref(false)

    function toComicDetail() {
      router.push({ path: '/comicDetail', query: { id: props.message._id }})
    }

    onMounted(()=>{
      let count = 0
      for (let item of props.message.categories) {
        if (item == '重口地帶') {
          count++;
          isShowZhogkou.value = true
        } else if (item == '生肉') {
          count++
          isShowShengrou.value = true
        } else if (item == '耽美花園') {
          count++
          isShowDanmei.value = true
        }
      }

      if (count == 0) {
        height.value = '0'
      } else if (count == 1) {
        height.value = '100%'
      } else if (count == 2) {
        height.value = '50%'
      } else if (count == 3) {
        height.value = '33.3%'
      }
    })

    return {
      isShowZhogkou,
      isShowDanmei,
      isShowShengrou,
      toComicDetail,
      height
    }
  }
}
</script>

<style scoped>
  .long-list-container {
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .long-list-box {
    width: calc(98% - 10px);
    height: 120px;
    border-radius: 5px;
    background-color: white;
    padding: 5px;
    display: flex;
  }

  .img-container {
    width: 100px;
    height: 120px;
    background-color: #f1929d;
  }

  .text-container {
    width: calc(100% - 130px);
    height: 120px;
  }

  .title {
    font-size: x-large;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #f1929d;
    height: 25%;
  }

  .author {
    font-size: medium;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: black;
  }

  .label-container {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    flex-flow:row-reverse wrap;
  }


  .tag-container {
    height: 100%;
    width: 20px;
  }

  .tag {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode:vertical-lr;
    color: white;
  }
</style>